<template>
  <div class="header flex-between">
    <div class="left flex-center-start">
      <slot></slot>
    </div>
    <div class="middle">
      <span>
        {{ headerTitle }}
      </span>
    </div>
    <div class="right flex-center">
      <div class="time">{{ nowTime }}</div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    headerTitle: {
      type: String,
      default: () => "端应用可重构系统",
    },
    choosedComponent: {
      type: String,
      default: () => "home",
    },
  },
  data() {
    return {
      nowTime: "",
      interval: 0,
    };
  },
  created() {
    this.initTime();
    this.interval = setInterval(() => {
      this.initTime();
    }, 1000);
  },
  methods: {
    initTime() {
      let date = new Date();
      let year = date.getFullYear(); //当前年份
      let month = date.getMonth(); //当前月份
      let data = date.getDate(); //天
      let hours = date.getHours(); //小时
      let minute = date.getMinutes(); //分
      let second = date.getSeconds(); //秒
      this.nowTime = `${year}年${month}月${data}日--${
        hours >= 10 ? hours : "0" + hours
      }时${minute >= 10 ? minute : "0" + minute}分${
        second >= 10 ? second : "0" + second
      }秒`;
    },
  },
};
</script>

<style lang="scss" scoped>
.header {
  // height: 82px;
  height: 0.58rem;
  position: relative;
  justify-content: center;

  .icon {
    // width: 0.25rem;
    // height: 0.25rem;
    // background-image: url(~@/assets/common/time@2x.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }
  .aside {
    margin-top: 0.18rem;
    width: 5.5rem;
    align-self: start;
  }

  .middle {
    width: 4.59rem;
    // height: 82px;
    height: 0.58rem;
    line-height: 0.58rem;
    background: url(~@/assets/images/z.png) no-repeat;
    background-position: center;
    background-size: contain;
    font-size: 0.24rem;
    align-items: center;
    color: #ffffff;
  }

  .left {
    // background-image: url(~@/assets/images/上方标题.png);
    // background-repeat: no-repeat;
    // background-position: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 4.6rem;
    height: 0.58rem;
    background: url(~@/assets/images/上方标题.png) no-repeat center;
    background-size: cover;
    & > div,
    a {
      padding-top: 0.03rem;
      display: block;
      text-decoration: none;
      // flex: 3;
      // width: 2.3rem;
      // height: 0.58rem;
      padding: 0.1rem 0.6rem;
      line-height: 0.58rem;
      cursor: pointer;
      font-size: 0.22rem;
      font-weight: 800;
      color: #c0cef8;
      margin: auto 0.2rem;
      margin-top: -0.1rem;
      background: url(~@/assets/images/按钮点击状态.png) no-repeat center;
      background-size: contain;
    }
  }

  .right {
    position: absolute;
    top: 0;
    right: 0;
    width: 4.6rem;
    height: 0.58rem;
    background: url(~@/assets/images/上方标题2.png) no-repeat center;
    background-size: cover;
    .time {
      position: absolute;
      left: 0.7rem;
      // width: 2.24rem;
      height: 0.28rem;
      // background: #0a2573;
      border-radius: 0.14rem;
      line-height: 0.28rem;
      font-size: 0.14rem;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #c0cef8;
    }
  }
}
</style>
